<template>
  <div class="page luckdraw-coin-history">
    <div class="luckdraw-coin-history-container" v-if="resultList.length > 0">
      <div class="list-section">
        <history-list v-for="(item, i) in resultList" :key="i" :listData="item"></history-list>
      </div>
      <div class="load-more">
        <span v-if="showNoMore">没有更多了</span>
        <span v-if="showLoadMore">加载中...</span>
      </div>
    </div>
    <empty-tip v-if="showEmptyTip" title="暂无金币明细"></empty-tip>
  </div>
</template>

<script>
import HistoryList from 'comp/history-list'
import mixins from 'comp/mixins'
import EmptyTip from 'comp/empty-tip'

export default {
  mixins: [mixins],
  components: {
    HistoryList,
    EmptyTip
  },
  data () {
    return {
      openId: '',
      resultList: [],
      pageNumber: 1,
      showNoMore: false,
      showLoadMore: false,
      showEmptyTip: false
    }
  },
  async mounted () {
    this.resetData()
    this.openId = await this.getOpenId()
    this.queryCoinLog()
  },
  onReachBottom () {
    // 页面上拉触底事件的处理函数
    if (this.showLoadMore) {
      this.queryCoinLog()
    }
  },
  methods: {
    /**
     * 查询交易记录
     */
    async queryCoinLog () {
      let pageNumber = this.pageNumber
      const ret = await this.$store.dispatch('queryCoinLog', {
        playerid: this.openId,
        page: pageNumber++,
        rows: 20
      })
      const arr1 = this.resultList
      const arr2 = ret.list
      if (arr1.length === 0 && arr2.length === 0) {
        // 空
        this.showNoMore = false
        this.showLoadMore = false
        this.showEmptyTip = true
      } else {
        if (ret.list.length < 20) {
          // 没有更多了
          this.showNoMore = true
          this.showLoadMore = false
        } else {
          // 加载中...
          this.showLoadMore = true
        }
      }
      this.resultList = arr1.concat(arr2)
      this.pageNumber = pageNumber
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-coin-history {
  .list-section {
    padding-top: 20rpx;
  }
  .load-more {
    text-align: center;
    color: #488ff0;
    font-size: 30rpx;
    padding: 30rpx 0 40rpx;
  }
}
</style>
